import request from '../../../utils/request'
import Pubsub from 'pubsub-js'
import moment from 'moment'
let startX = 0;
Page({
  // 触摸暂停和播放键
  handlerisPlay(){
    if(this.data.isPlay){// 当前是播放状态
      this.playr.pause();// 再次点击改变成暂停
      // 修改掉我们的isPlay的状态
      this.setData({isPlay:false})
    }else{// 当前是暂停状态
      this.playr.play();// 再次点击改变成播放
      // 修改掉我们的isPlay的状态
      this.setData({isPlay:true})
    }
  },
  // 获取我们的音乐详情信息
  async getSongInfo(){
    // console.log(this.data.songId);
    let ids = this.data.songId
    const res = await request({url:'/song/detail',data:{ids}})
    // console.log(res);
    if(res.code===200){
      this.setData({
        songInfo:{
            id:res.songs[0].id,
            songName:res.songs[0].name,
            name:res.songs[0].ar[0].name,
            songUrl:res.songs[0].al.picUrl,
        }
      })
    }
  },
  // 获取我们的音频
  async getSongAuido(){
    const id = this.data.songId
    const res = await request({url:'/song/url',data:{id}})
    // console.log(res);
    if(res.code===200){
      this.setData({
        songAudio:{
          id:res.data[0].id,
          picUrl:res.data[0].url
        }
      })
    }
  },
  // 点击 上一首 / 下一首
  songSwitch(e){
    // 点击了上一首或者是下一首之后将我们的id传给每日推荐列表，因为我们的id只有两个值，一个是next下一首  pre上一首
    // 使用pubsub
    Pubsub.publish('type',e.target.id)
  },
  // // 拖动滚动条 开始触摸
  handleStart(e){
  //   startX = e.touches[0].clientX
  //   this.playr.pause()
  //   this.setData({
  //     isPlay:false
  //   })
  },
  // // 拖动滚动条 开始移动
  handlemove(e){

  //   let newClientX = e.touches[0].clientX - startX 
  //   if(newClientX>450) newClientX = 450
  //   if(newClientX<0) newClientX = 0
  //   // startX = newClientX
  //   this.setData({
  //     totalProgressWidth:newClientX + 'rpx'
  //   })
  },
  // // 拖动滚动条 触摸结束
  handleleave(e){
  //   // console.log(this.data.totalProgressWidth.split('r')[0] / 450  * this.playr.duration);
  //   let newClientX = this.data.totalProgressWidth.split('r')[0] / 450  * this.playr.duration
  //   this.playr.seek(newClientX)
  //   this.setData({
  //     isPlay:true,
  //   })
  //   this.playr.play()
  },
  /**
   * 页面的初始数据
   */
  data: {
    isPlay:true,// 控制播放和暂停
    songId:0,// 这是当前的歌曲id
    songInfo:{},// 用来保存我们的当前歌曲详细信息
    songAudio:{},// 音频信息
    currentTime:0,// 当前的播放进度
    durationTime:0,// 当前的歌曲播放总时长
    totalProgressWidth:0,//进度条

  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // options可以接收到我们的query参数
    let songId = options.songId
    this.setData({// 保存当前的歌曲id
      songId,
    })

    await this.getSongInfo()
    await this.getSongAuido()

    // 创建一个音频对象
    this.playr = wx.getBackgroundAudioManager()
    // 音频对象中有一个src属性，里面传入一个音频地址。他会自动播放此音频
    // this.playr.src = this.data.songAudio.picUrl
    this.playr.src = this.data.songAudio.picUrl
    // 里面有一个必填的属性 是title
    this.playr.title = this.data.songInfo.name
    // 我们的暂停和播放是触摸按钮的，但是背景音频不会根据我们的音频来进行关闭，所以我们需要使用背景音频的一些方法
    this.playr.onPlay(()=>{// 监听我们的播放事件
      this.setData({
        isPlay:true,
      })
    })
    // 监听暂停事件
    this.playr.onPause(()=>{
      this.setData({
        isPlay:false,
      })
    })
    // 歌曲播放结束 自动播放下一首
    this.playr.onEnded(()=>{
      // 因为我们已经做过处理，我们直接使用pubsub就可以了
      Pubsub.publish('type','next')
    })
    // 监听歌曲的播放进度更新
    this.playr.onTimeUpdate(()=>{
      // console.log(moment(this.playr.currentTime).format('mm:ss'),this.playr.currentTime);
      // 使用moment得到我们想要的格式
      this.setData({
        // 使用moment获取 '分钟：秒数' 使用两位数的方式
        currentTime:moment(this.playr.currentTime * 1000).format('mm:ss'),
        durationTime:moment(this.playr.duration * 1000).format('mm:ss'),
        // 我们的进度条的移动位置，我们需要将当前时长*我们设置的宽度 / 总时长
        totalProgressWidth:this.playr.currentTime * 450 / this.playr.duration + 'rpx',
      })
    })


    // 获取最新的歌曲id
    Pubsub.subscribe('songId',async (_,songId)=>{
      // 修改我们的歌曲id
      this.setData({
        songId,
      })
      // 修改完之后再根据最新修改的id发送请求
      await this.getSongInfo()
      await this.getSongAuido()
      // 发送完请求之后将之前的音频对象
      // 覆盖并创建新的音频对象
      this.playr = wx.getBackgroundAudioManager()
      // 音频对象中有一个src属性，里面传入一个音频地址。他会自动播放此音频
      this.playr.src = this.data.songAudio.picUrl
      // 里面有一个必填的属性 是title
      this.playr.title = this.data.songInfo.name
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})